<template>
  <div>
    <div class="expert-show">
      <div class="title">{{ form.noData ? "无数据申报" : "指标申报数据" }}</div>
      <el-empty description="暂无数据" v-if="!hasData"></el-empty>
      <el-descriptions border :column="1" v-else>
        <template v-if="form.noData">
          <el-descriptions-item :label="labels.selfEvaluateNormal">
            <el-tooltip class="item" effect="dark" :content="form.score + '分'" placement="top">
              <el-tag>{{ setSelfEvaluate(form.selfEvaluate) }}</el-tag>
            </el-tooltip>
          </el-descriptions-item>
        </template>
        <template v-else>
          <!-- 此部分不一样 -->
          <slot name="normal"></slot>
          <el-descriptions-item :label="labels.score">{{ form.score }}分</el-descriptions-item>
        </template>

        <el-descriptions-item :label="labels.material">
          <template v-if="showFileList.length == 0">
            <span>无</span>
          </template>
          <template v-else>
            <div v-for="(file, index) in showFileList" :key="index" class="view-and-down">
              <el-tag class="material" @click="viewPDF(file)" size="small">
                <i class="el-icon-document"></i> {{ file.name }}</el-tag
              >
              <el-link type="primary" class="download" @click="download(file)">下载</el-link>
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item :label="labels.report">
          {{ form.indexReport ? form.indexReport : "无" }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template v-if="hasData">
      <div class="title title-expert">专家复核数据</div>
      <el-form ref="expertForm" :model="expertForm" label-position="left" class="expertForm">
        <el-row v-if="expertForm.id && disabled">
          <el-col :span="span">
            <el-form-item :label="labels.expertScore + ':'" label-width="200px">
              <el-tag>{{ expertForm.score }}分</el-tag>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!form.noData">
          <el-col :span="span">
            <el-form-item :label="labels.noData + ':'" label-width="200px">
              <el-switch
                :disabled="disabled"
                :active-value="1"
                :inactive-value="0"
                v-model="expertForm.noData"
                active-color="#13ce66">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="expertForm.noData">
          <el-row>
            <el-col :span="span">
              <el-form-item :label="labels.selfEvaluateExpert + ':'" label-width="200px">
                <el-tooltip
                  :disabled="expertForm.score == null"
                  class="item"
                  effect="dark"
                  :content="expertForm.score + '分'"
                  placement="top">
                  <el-select :disabled="disabled" v-model="expertForm.selfEvaluate" placeholder="请选择">
                    <el-option v-for="item in noDataOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-else>
          <!-- 此部分不一样 -->
          <slot name="expert"></slot>
          <!---------------->
        </template>
        <el-row>
          <el-col :span="span">
            <el-form-item :label="labels.review + ':'" label-width="200px">
              <el-input
                :disabled="disabled"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="expertForm.expertReview">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="handleModify">{{ disabled ? "复核" : "取消" }}</el-button>
          <el-button type="primary" plain @click="handleSubmit" v-if="!disabled">确认</el-button>
        </el-form-item>
      </el-form>
    </template>

    <!-- 系统评分 -->
    <div v-if="hasData" @click="viewScore" class="title title-expert system-score">
      系统评分：{{ systemScore != null ? systemScore : form.score }}分
    </div>

    <!-- 专家评分列表 -->
    <el-dialog title="专家评分" v-dialogDrag :visible.sync="visible" class="avue-dialog avue-dialog--top" width="60%">
      <el-empty description="暂无数据" v-if="expertFillList.length == 0"></el-empty>
      <el-table stripe v-else :data="expertFillList" border style="width: 100%">
        <el-table-column prop="nickname" label="专家姓名" width="180"> </el-table-column>
        <el-table-column prop="score" label="评分" width="180"> </el-table-column>
        <el-table-column prop="expertReview" label="评语"> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { setIndex, getIndex, getExpertFillList } from "@/api/indexAll"
import { onlineFile } from "@/api/admin/file"
import { isEmpty } from "@/util/empty"
import { getScoreNum } from "@/api/score"
import { getIndexJSON } from "@/api/admin/file"
import { getOptions } from "@/util/level"
import { getObj } from "@/api/river"

export default {
  props: ["riverId", "indexName", "indexId", "customForm", "customExpertForm"],
  data() {
    return {
      labels: {
        score: "自评分",
        material: "支撑材料",
        report: "申报说明",
        review: "专家评语",
        noData: "无数据填写",
        selfEvaluateExpert: "专家评级",
        selfEvaluateNormal: "自评等级",
        expertScore: "专家评分",
      },
      form: {
        score: null,
        fileList: null,
        indexReport: null,
        noData: null,
        selfEvaluate: null,
      },
      expertForm: {
        id: null,
        riverId: null,
        fillType: 1,
        year: null,
        expertReview: null,
        noData: null,
        selfEvaluate: null,
        score: null,
      },
      noDataOptions: [],
      systemScore: null,
      formBak: {},
      showFileList: [],
      expertFillList: [],
      visible: false,
      hasData: false,
      disabled: true,
      riverData: null,
      span: 18,
    }
  },
  watch: {
    riverId(val) {
      this.resetForm()
      if (!isEmpty(val)) {
        this.setRiverData(val).then(() => {
          this.getIndex()
        })
      }
    },
  },
  created() {
    Promise.all([getIndexJSON(), this.setRiverData(this.riverId)]).then((res) => {
      let jsonData = res[0].data
      if (jsonData != null && this.riverData != null) {
        let size = jsonData[this.indexName.slice(0, -5) + "Index"][this.riverData.level].length
        this.noDataOptions = getOptions(size)
      }
    })
    this.getIndex()
  },
  methods: {
    setRiverData(riverId) {
      return new Promise((resolve) => {
        getObj(riverId).then((res) => {
          this.riverData = res.data.data
          resolve()
        })
      })
    },
    //获取指标填写信息（包括非专家和专家）
    getIndex() {
      this.changeLoading(true)
      getIndex(this.indexName, this.riverId, 0).then((res) => {
        let resNormal = res.data.data
        if (resNormal != null) {
          //设置非专家数据
          Object.keys(this.form).forEach((key) => {
            this.form[key] = resNormal[key]
          })

          //设置父组件customForm
          Object.keys(this.customForm).forEach((key) => {
            this.customForm[key] = resNormal[key]
          })

          this.showFileList = JSON.parse(this.form.fileList)
          if (this.showFileList == null) {
            this.showFileList = []
          }
          getScoreNum(this.riverId, this.indexId).then((res2) => {
            let score = res2.data.data
            if (!isEmpty(score)) {
              this.systemScore = score
            }
          })

          getIndex(this.indexName, this.riverId, 1).then((res2) => {
            let resExpert = res2.data.data
            if (resExpert == null) {
              Object.keys(this.expertForm).forEach((key) => {
                this.expertForm[key] = this.form[key]
              })
              Object.keys(this.customExpertForm).forEach((key) => {
                this.customExpertForm[key] = this.customForm[key]
              })
              this.expertForm.id = null
              this.expertForm.fillType = 1
              this.expertForm.score = null
            } else {
              //设置专家数据
              Object.keys(this.expertForm).forEach((key) => {
                this.expertForm[key] = resExpert[key]
              })
              //设置父组件专家数据
              Object.keys(this.customExpertForm).forEach((key) => {
                this.customExpertForm[key] = resExpert[key]
              })
            }
            //显示数据
            this.hasData = true
            this.changeLoading(false)
          })
        } else {
          this.changeLoading(false)
        }
      })
    },
    //点击修改
    handleModify() {
      if (this.disabled) {
        this.formBak = { ...this.expertForm }
        this.disabled = false
        this.$emit("setDisabled", false)
        this.$emit("setBakData", true, true)
      } else {
        this.disabled = true
        this.$emit("setDisabled", true)
        Object.keys(this.expertForm).forEach((key) => {
          this.expertForm[key] = this.formBak[key]
        })
        this.$emit("setBakData", false, true)
      }
    },
    //点击提交
    handleSubmit() {
      this.$confirm("确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //将父组件的customExpertForm复制到本组件的expertForm
        Object.keys(this.customExpertForm).forEach((key) => {
          this.expertForm[key] = this.customExpertForm[key]
        })

        this.expertForm.riverId = this.riverId
        this.expertForm.year = this.riverData.year
        setIndex(this.indexName, this.expertForm, this.indexId).then((res) => {
          this.$message.success("提交成功")
          this.disabled = true
          this.$emit("setDisabled", true)
          this.getIndex()
          this.$emit("refreshIndexList")
        })
      })
    },
    //查看专家评分
    viewScore() {
      getExpertFillList(this.indexName, this.riverId).then((res) => {
        let list = res.data.data
        if (list != null) {
          this.expertFillList = list
        }
        this.visible = true
      })
    },
    //查看PDF
    viewPDF(file) {
      let fileName = file.url.split("/").slice(-1)[0]
      let bucketName = file.url.split("/").slice(-2)[0]
      onlineFile(bucketName, fileName).then((res) => {
        window.open(res.data.data, "_blank")
      })
    },
    //下载文件
    download(file) {
      this.downBlobFile(file.url, {}, file.name)
    },
    //重置表单和相关参数
    resetForm() {
      this.hasData = false
      this.disabled = true
      this.$emit("setDisabled", true)
      Object.keys(this.expertForm).forEach((key) => {
        this.expertForm[key] = null
      })
      Object.keys(this.form).forEach((key) => {
        this.form[key] = null
      })
      this.expertForm.fillType = 1
    },
    //显示加载中
    changeLoading(val) {
      this.$emit("changeLoading", val)
    },
    setSelfEvaluate(val) {
      for (let i = 0; i < this.noDataOptions.length; i++) {
        if (this.noDataOptions[i].value === val) return this.noDataOptions[i].label
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

.system-score:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #409eff;
}

.title-expert {
  margin-top: 20px;
}

.expertForm {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 20px 20px 0 20px;
  .el-input-number--small {
    width: 100%;
  }
}

.expert-show {
  .material:hover,
  .view-score:hover {
    cursor: pointer;
  }
  .view-and-down {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }
  .view-and-down:last-child {
    margin-bottom: 0;
  }
  .download {
    font-size: 12px;
    margin-left: 10px;
  }
}
</style>
